let laypage = layui.laypage;
let form = layui.form;

// 加载列表
// 接口文档: 分页数据
//     pagenum: 页面
//     pagesize: 一页要多少条数据
// 好处: 后台减少数据量请求
let data = {
    pagenum: 1,
    pagesize: 3
}

list();

function list() {
    $.ajax({
        url: "/my/article/list",
        data: {
            pagenum: data.pagenum,
            pagesize: data.pagesize,
        },
        success: function (res) {
            if (res.status == 0) {
                let str = "";
                res.data.forEach(ele => {
                    str += `<tr>
                      <td>${ele.title}</td>
                      <td>${ele.cate_name}</td>
                      <td>${ele.pub_date.slice(0, ele.pub_date.length - 4)}</td>
                      <td>${ele.state}</td>
                      <th>
                        <a href="/article/edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
                        <button data-id="${ele.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                      </th>
                    </tr>`;
                });

                $("tbody").html(str);

                // 便于维护代码
                page(res.total);
            }
        }
    });
}

// *************************************************分页功能
// layui: form  layer
// 分页模块：

function page(numb) {
    laypage.render({

        elem: 'page',
        count: numb,
        // 每页都多少页
        limit: data.pagesize,
        // 当前在第几页
        curr: data.pagenum,
        // 给用户提供选择每页显示多少条；
        limits: [2, 3, 5, 10],

        // 功能选择
        layout: ['prev', 'page', 'next', 'count', 'limit'],

        // 当用户点击时候专门函数：执行用户点击行为
        // 列表第一次加载的时候，jump也会执行；
        jump: function (obj, key) {
            // key:  true第一次执行；undefined用户点击

            // 用户点击
            if (key == undefined) {
                // 当前分页现在状态：页码、要求几条数据、数据总量
                // obj.curr 可以获取点到用户哪个页码；
                data.pagenum = obj.curr;
                data.pagesize = obj.limit;


                list();
            }
        }
    });
}



// ********************************************************分类
$.ajax({
    url: "/my/article/cates",
    success: function (res) {
        if (res.status == 0) {
            let str = `<option value="">请选择文章类别</option>`;
            res.data.forEach(item => {
                str += `<option value="${item.Id}">${item.name}</option>`;
            });
            $("#category").html(str);

            // form模块：如果表单元素动态插入，好看样式不会跟着动态渲染；
            // 需要调用渲染更新方法；
            form.render("select");
        }
    }
});

$("form").on("submit", function (e) {
    e.preventDefault();


    // 1.收集数据，设置给 全局变量data,可选参数；
    let arr = $(this).serializeArray();


    // 2.设置给全局变量data;
    data.cate_id = arr[0].value;
    data.state = arr[1].value;
    // 默认回到该选择项条件下  第一页；
    data.pagenum = 1;

    // 再次发出ajax:
    list();
})